<template>
  <div class="page-wrap">
    <Table filter v-bind="tableOpts" v-on="tableEvent" />
    <el-dialog
      v-bind="{
        title: '补单材料详情',
        'close-on-click-modal': false,
        width: '60vw',
      }"
      :visible.sync="showList"
    >
      <div style="height: 60vh">
        <Table :pagination="false" :dataSource="list" :columns="listColumn">
        </Table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { EXTRA_ORDER_STATUS } from "@/assets/js/params.js";
import { ExtraListColumn } from "@/assets/js/columns.js";
import tableMixins from "@/mixins/tableMixins.vue";
export default {
  name: "OrderExtra",
  mixins: [tableMixins],
  data() {
    return {
      apiName: "getExtraOrder",
      showList: false,
      listColumn: ExtraListColumn,
      list: [],
      form: {
        orderName: {
          tag: "el-input",
          label: "订单名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入订单名称",
          },
        },
        creator: {
          tag: "el-input",
          label: "创建人",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入创建人",
          },
        },
        status: {
          tag: "el-select",
          label: "订单状态",
          value: "",
          items: Object.entries(EXTRA_ORDER_STATUS).map(([value, label]) => ({
            label,
            value,
          })),
          props: {
            clearable: true,
            filterable: true,
          },
        },
        date: {
          tag: "el-date-picker",
          label: "创建时间",
          value: [],
          props: {
            rangeSeparator: "至",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            type: "datetimerange",
            defaultTime: ["00:00:00", "23:59:59"],
          },
        },
      },
    };
  },
  computed: {},
  methods: {
    handleAction(status, row) {
      const { orderName: name = "", id } = row;
      if (status == 0) {
        this.showList = true;
        this.list = row.materials || [];
        return;
      } else
        this.showConfirm(
          `确认${status == "1" ? "通过" : "拒绝"}【${name}】？`,
          "patchExtraOrder",
          { id, status }
        );
    },
  },
};
</script>

<style lang="less" scoped></style>
